﻿@model CampaignModel
@inject IPageHeadBuilder pagebuilder
@{
    pagebuilder.AddScriptParts(ResourceLocation.Head, "~/administration/codemirror/codemirror.js", excludeFromBundle: true);
    pagebuilder.AddScriptParts(ResourceLocation.Head, "~/administration/codemirror/mode/xml/xml.js", excludeFromBundle: true);
    pagebuilder.AddCssFileParts(ResourceLocation.Head, "~/administration/codemirror/codemirror.css", excludeFromBundle: true);
}

<div class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            <admin-label asp-for="Name" />
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="Name" />
                <span asp-validation-for="Name"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="Subject" />
            <div class="col-md-9 col-sm-9">
                <admin-input asp-for="Subject" />
                <span asp-validation-for="Subject"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="Body" />
            <div class="col-md-9 col-sm-9">
                <div>
                    <label>@T("Admin.ContentManagement.MessageTemplates.Fields.AllowedTokens")</label>
                    <input type="search" name="SearchTokens" class="form-control SearchTokens" placeholder="@T("Search")" />
                </div>
                <div class="AllowedTokens">
                    @foreach (var token in Model.AllowedTokens)
                    {
                        <button type="button" onclick="AddTokenToEditor(this)" class="btn btn-info">@token</button>
                    }
                </div>
                <admin-input asp-for="Body" asp-template="Codemirror" />
                <span asp-validation-for="Body"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="EmailAccountId" />
            <div class="col-md-9 col-sm-9">
                <admin-select asp-for="EmailAccountId" asp-items="@(new SelectList(Model.AvailableEmailAccounts, "Id", "DisplayName"))" />
                <span asp-validation-for="EmailAccountId"></span>
            </div>
        </div>
        <div class="form-group">
            <admin-label asp-for="LanguageId" />
            <div class="col-md-9 col-sm-9">
                <admin-select asp-for="LanguageId" asp-items="Model.AvailableLanguages" />
                <span asp-validation-for="LanguageId"></span>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".SearchTokens").on("input", function (e) { SearchTokens(e); })
        $("input").click(function (e) {
            onInputFocus = $(e.target);
        });
    });

    function AddTokenToEditor(e) {
        var cm = $('.CodeMirror')[0].CodeMirror;
        var doc = cm.getDoc();
        var cursor = doc.getCursor(); // gets the line number in the cursor position
        doc.replaceRange($(e).text(), cursor);
    }

    function SearchTokens(e) {
        var searchVal = $(e.target).val();
        var TokensPnl = $(e.target).closest(".form-group").find(".AllowedTokens");
        $(TokensPnl).find(".btn").show()
            .each(function (i, c) {
                var Token = $(c).text();
                if (Token.search(new RegExp(searchVal, "i")) == -1) {
                    $(c).hide();
                }
            });
    }
</script>